<template>
    <div class="ChatBoxe">
        <div class="content" id="gundong">
            <div :class="displayStyle(index)" v-for="(item, index) in msgList" :key="index">
                <img v-if="index % 2 !== 0" src="../assets/20230306215743.jpg" alt="">
                <img v-if="index % 2 == 0" src="../assets/ayue.jpg" alt="">
                <div class="con">
                    {{ item.msg }}
                </div>
            </div>
        </div>
        <div class="question">
            <input v-model="msg" type="text" @keyup.enter="sendMsg" @confirm="sendMsg" confirm-type="search"
                placeholder-class="my-neirong-sm" />
            <van-button class="_btn" size="small" @click="sendMsg" :disabled="msgLoad" type="info" id="sendFind">{{ sentext }}</van-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ChatBoxe',
    mounted() {
        if (document.cookie != "") {
            this.msgList = JSON.parse(document.cookie);
        }
    },
    data() {
        return {
            // 输入自己的key
            api: '',
            msgLoad: false,
            anData: {},
            sentext: 'Enter',
            animationData: {},
            showTow: false,
            msgList: [{
                my: false,
                msg: "你好，我是ChatGpt,请问有什么问题可以帮助您?"
            }],
            msgContent: "",
            msg: "",
        }
    },
    methods: {
        // 判断输入方
        displayStyle(index) {
            if (index % 2 == 0) {
                return 'show';
            } else {
                return 'onshow'
            }
        },
        sendMsg() {
            // 消息为空不做任何操作
            if (this.msg == "") {
                this.$toast.fail('哎呀！空白没办法回答你')
                return 0;
            }
            if (this.msgLoad == true) { return }
            this.sentext = '正在回答中...'
            this.msgList.push({
                "msg": this.msg,
                "my": true,
            })
            this.msgContent += ('YOU:' + this.msg + "\n")
            this.msgLoad = true
            // 清除消息
            this.msg = "";
            this.$axios.post('https://api.openai.com/v1/completions', {
                prompt: this.msgContent, max_tokens: 2048, model: "text-davinci-003"
            }, {
                headers: { 'content-type': 'application/json', 'Authorization': 'Bearer ' + this.api }
            }).then(res => {
                let text = res.data.choices[0].text.replace("openai:", "").replace("openai:", "").replace(/^\n|\n$/g, "")
                this.msgList.push({
                    "msg": text,
                    "my": false,
                })
                this.msgContent += (text + "\n")
                this.msgLoad = false
                this.sentext = '发送'
                document.cookie = JSON.stringify(this.msgList);
                this.$nextTick(() => {
                    let msg = document.getElementById('gundong') // 获取对象
                    msg.scrollTop = msg.scrollHeight // 滚动高度
                })
            }).catch(() => {
                this.$toast.fail("无法链接服务器！")
                this.msgLoad = true
                this.sentext = '停止使用ChatGpt服务！'
                const demo = document.querySelector('#sendFind')
                demo.style.color = "red"
                this.msgList.push({
                    "msg": '抱歉！请检查你的网络状态，目前国内网络无法使用ChatGpt服务！',
                    "my": false,
                    'time': this.time
                })

            })
            this.$nextTick(() => {
                let msg = document.getElementById('gundong') // 获取对象
                msg.scrollTop = msg.scrollHeight // 滚动高度
            })
        },

    }
}
</script>

<style scoped>
.ChatBoxe {
    width: 70vw;
    height:70vh;
    background: #ffffff7b;
    border-radius: 2%;
    overflow: hidden;
    padding: 1%;
    z-index: 1;
}

.question {
    width: 100%;
    background: rgba(240, 233, 233, 0.4);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.question input {
    border: none;
    background: none;
    outline: none;
    height: 44px;
    padding-left: 10px;
    word-break: break-all;
    white-space: normal;
    flex: 1;
}

.question button {
    float: right;
    background-color: #f0f0f0;
    border: none;
    font-size: 1rem;
    font-weight: bold;
    color: #1989fa;
}

.content {
    height: 93%;
    overflow: hidden;
}

.content img {
    width: 40px;
    height: 40px;
    /* border-radius: 50%; */
}

.show {
    color: #000;
    display: flex;
    margin-bottom: 1rem;
    /* align-items: center; */
}

.onshow {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 1rem;
    /* align-items: center; */
}

.con {
    background: #fff;
    padding: 1rem;
    margin: 1rem;
}

.onshow>.con {
    background-color: #89d961;
    word-break: break-all;
    white-space: normal;
}
</style>
